iT邦幫忙

2025 iThome 鐵人賽

DAY 1
0
Modern Web

30天一起搞懂Web觀念系列 第 1

[DAY1] HTML 是什麼?為什麼是這樣設計?

  • 分享至 

  • xImage
  •  

前言

哈囉~我是Joanne,目前是大四,也是我第一次參加鐵人競賽。我學網頁一段時間了,雖然沒有很厲害,但也開發過大大小小的網頁專案(前端的比較多),知道什麼時候要用什麼語法寫,但卻常常對為什麼這樣用?為什麼這樣設計?對這些底層的技術非常模糊,因此我想要透過這三十天的時間好好為自己補課,所以形式也會比較像是我的學習筆記整理,若我有什麼錯誤的話也歡迎留言指證,歡迎你一起加入我的旅程,一起學習!

這三十天我將從大家熟知的HTML、CCS、JS開始談起,再深入HTTP、資安、優化等,希望這三十天可以順利完成!

今天第一天,我們就從簡單的HTML談起吧!


HTML 是什麼? HTML 為什麼是這樣設計的?

HTML(HyperText Markup Language 超文本標記語言)一種標記語言而非程式語言
HTML是以語意標記為基礎的語言,設計就是要用來給瀏覽器看懂網頁的「架構」,意思就是說他主要的用途就是告訴瀏覽器這一個區塊要顯示什麼樣的內容,是圖片、文字還是輸入欄位,它不會負責設計和邏輯(這裡給CSS和JavaScript做)

舉例來說:
這個h1元素,他只是告訴瀏覽器這裡是標題,雖然他做到會讓文字加粗體並字體變大,但是並不代表「設計」是HTML工作,而且W3C也鼓勵開發者使用CSS替代一些用於表現的HTML元素

<h1>This is Title</h1>

HTML 結構

HTML本身是一種純文字檔案,以.htm、.html為副檔名。

在寫HTML的我們會這樣寫:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>
  • <!DOCTYPE html> :放在 HTML 文件頂端,聲明使用的是HTML5標準模式(Standards mode)

    • 如果沒有寫這個他就會使用怪異模式(Quirks mode)。怪異模式會讓瀏覽器會自動用自己的模式去渲染自己的頁面,所以每個瀏覽器都可能不同

    • HTML4的聲明方式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • <html></html>:整個網頁的根元素,放你的所有網頁內容

  • <head></head> :放給電腦搜尋的資訊,不是直接給使用者看到的資訊

  • <body></body> :放給使用者可以在網頁上看到的內容


HTML 標籤與屬性

<a href=”https://google.com”>Link</a>
   屬性           值
 (Attribute)   (Value)

這裡面有很多標籤對應的屬性名稱,如果有興趣的話也可以去看看👇
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes


參考資料

https://www.tsg.com.tw/blog-detail4-320-1-html-head-body.htm

https://medium.com/@han03230205/菜鳥五分鐘系列-簡單認識-doctype-3794b0f5d723

https://crossbond.tw/introduction-to-html-unit-3-attributes/

https://zh.wikipedia.org/zh-tw/HTML


下一篇
[DAY2] CSS 是什麼?盒模型、選擇器是什麼?
系列文
30天一起搞懂Web觀念30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言